<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
  <link rel="stylesheet" href="style.css">
  <script src="../ajax/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="shortcut">
  <div class="wrapper">
    <i class="avatar"></i>
    <ul>
      <li><a href="登录login.html" id="top">您好！请先登录</a></li>
      <li><a href="注册导航.html">免费注册</a></li>
      <li><a href="index.html">主页</a></li>
      <li><a href="ShopCar.html">购物车</a></li>
      <li><a href="#">收货中心</a></li>
      <li><a href="homePage.html">个人中心</a></li>
      <li><a href="视觉介绍.html"><span></span>官网</a></li>
    </ul>
  </div>
</div>
<div class="content">
  <div class="login-wrapper">
    <div class="left-img">
    </div>
    <form class="right-login-form"  id="login_form" >
      <div class="form-wrapper">
        <h1>Log in</h1>
        <div class="input-items">
                        <span class="input-tips">
                            用户名
                        </span>
          <input type="text" class="inputs" placeholder="输入你的账户" id="input1" name="username">
          <span class="msg"></span>
        </div>
        <div class="input-items">
                        <span class="input-tips">
                            密码
                        </span>
          <input type="password" class="inputs" placeholder="输入你的密码" id="input2" name="password">
          <span class="msg"></span>
          <span class="forgot">忘记密码？</span>
        </div>

        <p><a onclick="sub()" style="cursor:pointer;">登录</a></p>

        <div class="siginup-tips">
          <span>没有账户？</span>
          <span><a href="注册导航.html">注册</a></span>
        </div>
        <div class="other-login">
          <div class="divider">
            <span class="line"></span>
            <span class="divider-text">or</span>
            <span class="line"></span>
          </div>
          <div class="other-login-wrapper">
            <div class="other-login-item">
              <img src="img/icon_QQ.png" alt="QQ">
            </div>
            <div class="other-login-item">
              <img src="img/微信.png" alt="WeChat">
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
<script>
  const username = document.querySelector('[name=username]')
  // 2.2 使用change事件  值发生变化的时候
  username.addEventListener('change', verifyName)
  // 2.3 封装verifyName函数
  function verifyName() {
    // console.log(11)
    const span = username.nextElementSibling
    // 2.4 定规则  用户名
    const reg = /^[a-zA-Z0-9-_]{6,10}$/
    if (!reg.test(username.value)) {
      // console.log(11)
      span.innerText = '输入不合法,请输入6~10位'
      return false
    }
    // 2.5 合法的 就清空span
    span.innerText = ''
    return true
  }
  const password = document.querySelector('[name=password]')
  //5.2 使用change事件  值发生变化的时候
  password.addEventListener('change', verifyPwd)
  // 5.3 verifyPhone
  function verifyPwd() {
    // console.log(11)
    const span = password.nextElementSibling
    // 5.4 定规则  密码
    const reg = /^[a-zA-Z0-9-_]{6,20}$/
    if (!reg.test(password.value)) {
      // console.log(11)
      span.innerText = '输入不合法,6~20位数字字母符号组成'
      return false
    }
    // 5.5 合法的 就清空span
    span.innerText = ''
    return true
  }
  const form = document.querySelector('form')
  form.addEventListener('submit', function (e) {
    // 判断是否勾选我同意模块 ，如果有 icon-queren2说明就勾选了，否则没勾选
    // if (!queren.classList.contains('icon-queren2')) {
    //   alert('请勾选同意协议')
    //   // 阻止提交
    //   e.preventDefault()
    // }
    // 依次判断上面的每个框框 是否通过，只要有一个没有通过的就阻止
    // console.log(verifyName())
    if (!verifyName()) e.preventDefault()
    if (!verifyPwd()) e.preventDefault()
  })



 function sub(){
    $.ajax({
      url:'http://127.0.0.1:5000/login',
      type:'post',
      data:$("#login_form").serialize(),
      success:function (mes){
        if(mes=="false"){
          alert('账号密码或错误请重新输入')
        }
        else{
         sessionStorage.setItem('YM',JSON.stringify(mes))
          alert('登录成功！')
          location.href="index.html"
        }
      }
    })
  }



</script>
</body>
</html>